<template>
	<div class="livecontentpage">
		<van-cell>
			<template #title>
				<van-image round width="2rem" height="2rem" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
				<div style="font-size: 12px;margin-left:5px" @click="$router.push({name:'shopindex'})">{{shopname}}</div>
			</template>
			<template #right-icon>
				<div class="van-cell_righticon">
					<van-icon name="search" class="search-icon" style="font-size:18px;margin-right:15px;" @click="$router.push({name:'search'})" /><div style="font-size: 12px;">关注</div>&nbsp;|&nbsp;<div
						style="font-size: 12px;" @click="$router.push({name:'my'})">个人中心</div>
				</div>
			</template>
		</van-cell>
		<div class="prism-player" id="player-con" v-show="liveplay"></div>	
		<div v-if="!liveplay"><van-image width="100%" height="200" :src="item.cover"/></div>
		<div style="height: 50px;background: white;display: flex;align-items: center;justify-content: space-between;" v-if="!liveplay">
			<div class="ml-10" style="font-size:16px;font-weight: bold;"><span class="shenlan"><span style="color:red;font-size:14px">开播剩余时长 </span>{{this.time}}</span></div>
			<div class="mr-10"><van-button icon="clock-o"  round type="info" size="mini">开播提醒</van-button></div>
		</div>
		<div style="color:#aaa;font-size:8px" class="ml-10 mb-10" v-if="!liveplay">重要提示：开播后刷新页面或重新进入即可观看</div>
		<div style="height:5px;background:#eee" />
		<div>
			<van-tabs v-model="active">
				<van-tab title="互动">
					<lts></lts>
				</van-tab>
				<van-tab title="评论">
					内容2
				</van-tab>
				<van-tab title="介绍"><span v-html="item.content"></span></van-tab>
			</van-tabs>
		</div>
	</div>
</template>

<script>
import lts from "./livelts.vue"
	export default {
		components:{
			lts
		},
		data() {
			return {
				shopname: localStorage.getItem('shopname')?localStorage.getItem('shopname'):'', //店铺名
				active: 0, //默认详情
				item:'',
				id:'',//单个知识id
				time:'',
				liveplay:false
			}
		},
		methods: {

		},
		async mounted() {
			this.id= this.$route.query.id;
			let query = {
				id: this.id
			};
			let res0 = await this.$frontaxios.post(this.$front.getOneLive, query);
			if(res0.code==1){
				this.item=res0.data;
			}else{
				console.log('获取直播数据失败');
				return;
			}
			console.log(this.item);
			let intstarttime=parseInt(getHTime(this.item.start_time)/1000);
			let nowtime = parseInt(Date.now() / 1000);
			var time=(intstarttime-nowtime)*1000;
            let stime=setInterval(() => {
                time=time-1000;
                this.time=formatDuring(time);
                if(time<=0){
                time=0;
				this.liveplay=true;
                clearInterval(stime);
            }
            }, 1000);
			let res = this.item.boliu_url;
			/* Custom events for skipping ads. These parameters are provided by the many video ad component. */
			var manyVideoAdClose = function(manyVideoAd) {
				/* Register the pause event to pause the ad. */
				manyVideoAd.pauseManyVideoAd()
				var result = confirm('确定开通会员关闭广告吗？')
				if (result) {
					/* Register the skip event to skip the ad. */
					manyVideoAd.closeManyVideoAd()
				} else {
					/* Register the play event to play the ad. */
					manyVideoAd.playManyVideoAd()
				}
			}
			var player = new Aliplayer({
				id: "player-con",
				source: res, //播放地址，可以是第三方点播地址，或阿里云点播服务中的播放地址。
				"width": "100%",
				"height": "210px",
				"autoplay": true,
				//直播参数必须为true
				"isLive": true,
				"rePlay": false,
				"playsinline": true,
				"preload": true,
				"controlBarVisibility": "hover",
				"useH5Prism": true,
				// components: [{ //广告插件
				// 	name: 'ManyVideoADComponent',
				// 	type: AliPlayerComponent.ManyVideoADComponent,
				// 	args: [
				// 		[{
				// 				adVideo: 'https://alivc-demo-cms.alicdn.com/video/videoAD.mp4',
				// 				adVideoLink: 'https://www.aliyun.com/product/live'
				// 			},
				// 			{
				// 				adVideo: 'https://player.alicdn.com/resource/player/qupai.mp4',
				// 				adVideoLink: 'https://www.aliyun.com/product/live2'
				// 			},
				// 			{
				// 				adVideo: 'https://player.alicdn.com/video/guanggao.mp4',
				// 				adVideoLink: 'https://www.aliyun.com/product/live3'
				// 			}
				// 		], manyVideoAdClose, 'VIP关闭广告'
				// 	]
				// }],
				"extraInfo": {
					"crossOrigin": "anonymous"
				},
				"skinLayout": [{
						"name": "bigPlayButton",
						"align": "blabs",
						"x": 30,
						"y": 80
					},
					{
						"name": "H5Loading",
						"align": "cc"
					},
					{
						"name": "errorDisplay",
						"align": "tlabs",
						"x": 0,
						"y": 0
					},
					{
						"name": "infoDisplay"
					},
					{
						"name": "tooltip",
						"align": "blabs",
						"x": 0,
						"y": 56
					},
					{
						"name": "thumbnail"
					},
					{
						"name": "controlBar",
						"align": "blabs",
						"x": 0,
						"y": 0,
						"children": [{
								"name": "progress",
								"align": "blabs",
								"x": 0,
								"y": 44
							},
							{
								"name": "playButton",
								"align": "tl",
								"x": 15,
								"y": 12
							},
							{
								"name": "timeDisplay",
								"align": "tl",
								"x": 10,
								"y": 7
							},
							{
								"name": "fullScreenButton",
								"align": "tr",
								"x": 10,
								"y": 12
							},
							{
								"name": "subtitle",
								"align": "tr",
								"x": 15,
								"y": 12
							},
							{
								"name": "setting",
								"align": "tr",
								"x": 15,
								"y": 12
							},
							{
								"name": "volume",
								"align": "tr",
								"x": 5,
								"y": 10
							},
							{
								"name": "snapshot",
								"align": "tr",
								"x": 10,
								"y": 12
							}
						]
					}
				]
			}, function(player) {
				//console.log("The player is created");
				//player.play();
			});
			/* h5截图按钮, 截图成功回调 */
			player.on('snapshoted', function(data) {
				var pictureData = data.paramData.base64
				var downloadElement = document.createElement('a')
				downloadElement.setAttribute('href', pictureData)
				var fileName = 'Aliplayer' + Date.now() + '.png'
				downloadElement.setAttribute('download', fileName)
				downloadElement.click()
				pictureData = null
			});
		}
	}
</script>

<style lang="scss" scoped>
	.livecontentpage {
		.shenlan{
			color:$shenlan;
		}
		.van-cell__title {
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.van-cell_righticon {
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.fixvideocontent {
			position: fixed;
			right: 0;
			bottom: 0;
			left: 0;
			height: 50px;
			border-top: 1px solid #eee;
			line-height: 50px;
			display: flex;
			text-align: center;
			font-size: 12px;
		}
	}
</style>
